import React, {Component} from 'react';
import {Text, View,StyleSheet,ActivityIndicator,TouchableOpacity} from 'react-native';
import {WebView} from "react-native-webview";
import Ionicons from "react-native-vector-icons/Ionicons";

import NavigationBar from "../common/NavigationBar";

const THEME_COLOR = '#678';

// 教程详情页面
class WebViewPage extends Component {
  constructor(props){
    super(props);
    this.state = {
      url:''
    }
  }
  render() {
    let {url} = this.state;
    return (
      <View style={styles.container}>
        {/* 顶部导航栏 */}
        <NavigationBar
          title={'教程'}
          style={{backgroundColor: THEME_COLOR}}
          leftButton={this.leftButton()}
        />
        <WebView
          startInLoadingState={true}
          renderLoading={this.load}
          source={{uri:url}}
        />
      </View>
    );
  }

  componentDidMount() {
    let {route} = this.props;
    this.setState({
      url:route.params.url
    })
    console.log(route)
  }

  // 顶部左侧按钮
  leftButton = () => {
    return <TouchableOpacity onPress={this.goBack} style={styles.leftButton}>
      <Ionicons name={'ios-arrow-back'} size={26} color={'#fff'}/>
    </TouchableOpacity>
  };

  // 顶部左侧按钮返回事件
  goBack = () => {
    let {navigation} = this.props;
    navigation.goBack()
  };

  // webView加载
  load = () => {
    return <View style={styles.load}>
      <ActivityIndicator size={30} color={'#999'}/>
      <Text>正在加载中...</Text>
    </View>
  };
}

const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  leftButton:{
    marginLeft: 15
  },
  load:{
    flex:1,
    alignItems:'center',
  }
});

export default WebViewPage;